<template>
	<view>
		<u-navbar title="昵称">
			<view slot="right" class="u-p-x-16 u-p-y-4 u-m-r-30 radius" @tap="save" :class="{'bg-grey':!valid,'bg-blue':valid}">
				<text class="u-font-28">保存</text>
			</view>
		</u-navbar>
		<view class="u-m-t-20 bg-white u-p-30">
			<input class="u-font-28" maxlength="10" v-model="userName" placeholder="请输入您要设置的昵称..."/>
			<view class="text-gray u-text-right u-m-t-40">
				<text>{{byte}}</text>
			</view>
		</view>
		<view class="u-m-t-20 u-m-x-30">
			<text class="u-font-28 text-gray">昵称最少设置4个字符起,1个中文等于2个字符.</text>
		</view>
	</view>
</template>

<script>
	import {goback} from '@/utils/util.js'
	import {modifyUser} from "@/api/user.js"
	import { getStringByte } from "@/utils/check";
	import {mapGetters,mapMutations} from "vuex"
	export default {
		data() {
			return {
				userName:''
			};
		},
		computed:{
			...mapGetters('user',['userInfo']),
			byte(){
				return getStringByte(this.userName)
			},
			valid(){
				return this.userInfo.userName!=this.userName&&this.byte>=4 
			}
		},
		onLoad() {
			this.userName = this.userInfo.userName
		},
		methods:{
			...mapMutations('user',['mixUserInfo']),
			async save(){
				if(this.save.lock||!this.valid){
					return
				}
				const userName = this.userName.replace(/\s+/g,'')
				try{
					this.save.lock = true
					await modifyUser({userName})
					
					this.mixUserInfo({userName})
					goback()
				}finally{
					this.save.lock = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
